<template>
  <div class="viewport">
    <!-- 进入后台 -->
    <div class="column">
      <!--概览-->
      <div class="overview panel">
        <div class="inner">
          <div class="item" @click="toggleDevices('')">
            <h4>{{ bigBoardA.devSum }}</h4>
            <span style="display: flex; align-items: center">
              <el-icon>
                <Cpu style="color: #006cff" />
              </el-icon>
              设备总数
            </span>
          </div>
          <div
            class="item"
            v-for="(items, index) in Devices"
            :key="index"
            @click="toggleDevices(items.estate)"
          >
            <h4>{{ items?.value ? items?.value : 0 }}</h4>
            <span style="display: flex; align-items: center">
              <el-icon>
                <Cpu style="color: #6acca3" />
              </el-icon>
              {{
                items?.estate === 1
                  ? "开启设备"
                  : items?.estate === 0
                  ? "停机设备"
                  : "故障设备"
              }}
            </span>
          </div>
          <div class="item" @click="toggleBusiness()">
            <h4>{{ businesslength }}</h4>
            <span style="display: flex; align-items: center">
              <el-icon><OfficeBuilding style="color: #6acca3" /></el-icon>
              企业数量
            </span>
          </div>
          <!-- 
                <Cpu style="color: orange" />
                <Cpu style="color: #ed3f35" />
             -->
        </div>
      </div>
      <!--监控-->
      <div class="monitor panel">
        <div class="inner">
          <div class="tabs">
            <a href="javascript:;" data-index="1">异常设备监控</a>
          </div>
          <div class="content" style="display: block">
            <div class="head">
              <span class="col">所属企业</span>
              <!-- <span class="col">设备编号</span> -->
              <span class="col">设备地址</span>
              <span class="col">告警信息</span>
              <span class="col">告警时间</span>
            </div>
            <div class="device-table-content">
              <el-table
                ref="warnTableRef"
                class="alarm-table"
                :data="tableData"
                style="width: 100%; height: 15rem"
                @cell-click="toggleWarn"
                @cell-mouse-enter="mouseEnter"
                @cell-mouse-leave="mouseLeave"
                :row-style="pointer"
              >
                <el-table-column
                  v-for="item in tableHead"
                  :prop="item.prop"
                  :key="item.prop"
                />
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <!--点位-->
      <div class="point panel">
        <div class="inner">
          <h3>区域分布统计</h3>
          <div class="chart">
            <div class="pie" ref="ponintChartRef"></div>
            <div class="data">
              <div class="item">
                <h4>{{ bigBoardA.point }}</h4>
                <span>
                  <i class="icon-dot" style="color: #ed3f35"></i>
                  设备总数
                </span>
              </div>
              <div class="item">
                <h4>{{ monthAdd }}</h4>
                <span>
                  <i class="icon-dot" style="color: #eacf19"></i>
                  本月新增
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 地图 + 当月活性炭更换量-->
    <div class="column">
      <!-- 地图 -->
      <div class="map">
        <h3 style="display: flex; align-items: center">
          <span class="icon-cube">设备地图</span>
          <!-- <div style="padding-left: 10px">
            <el-cascader
              popper-class="pc-sel-area-cascader"
              ref="cascaderRef"
              placeholder="区域可搜索"
              :options="cascader.regionOptions"
              :props="cascaderOneProps"
              @change="handleChange"
              filterable
              clearable
              size="small"
            />
          </div> -->
        </h3>
        <div class="chart">
          <div class="geo" ref="mapRef"></div>
        </div>
      </div>
      <!-- 当月活性炭更换量 -->
      <div class="users panel">
        <div class="inner">
          <h3
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            {{
              carbonSwitch === "VOCs" ? "当月活性炭更换量" : "VOCs减排量"
            }}(吨)
            <div style="padding-left: 10px">
              <el-cascader
                popper-class="pc-sel-carbon-cascader"
                ref="cascaderCarbonRef"
                placeholder="月份可输入"
                :options="cascader.months"
                @change="handleChangeCarbon"
                filterable
                clearable
                size="small"
              />
            </div>
          </h3>
          <div class="chart">
            <div class="bar" ref="userChartRef"></div>
            <div class="data">
              <div class="item">
                <h3 style="margin-bottom: 0.5rem">
                  {{
                    carbonSwitch === "VOCs"
                      ? bigBoardA.users
                      : (bigBoardA.users * 0.2).toFixed(2)
                  }}
                  (吨)
                </h3>
                <span>
                  <i class="icon-dot" style="color: #ed3f35"></i>
                  {{ carbonSwitch === "VOCs" ? "活性炭更换量" : "VOCs减排量" }}
                </span>
              </div>
              <div class="item">
                <el-button round @click="switchCarbon">{{
                  carbonSwitch
                }}</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 企业设备状态 -->
    <div class="column">
      <div class="sales panel">
        <div class="inner">
          <div class="caption">
            <h3>
              企业设备状态
              <!-- {{ carBonTableData.length === 0 ? "暂无数据" : "企业设备状态" }} -->
            </h3>
            <!-- <a href="javascript:;" class="active" data-type="year"
              >设备编号：{{
                carBonTableData.length === 0
                  ? ""
                  : carbonItem.config?.ecode
                  ? carbonItem.config?.ecode
                  : "无"
              }}</a
            > -->
            <div class="cascaderTwo">
              <el-cascader
                popper-class="pc-sel-table-cascader"
                ref="cascaderRefTwo"
                placeholder="企业名称可搜索"
                :options="cascader.companyOptions"
                :props="cascaderProps"
                @change="handleChangeTwo"
                filterable
                clearable
                size="small"
              />
            </div>
          </div>
          <!-- <div class="chart">
            <div class="line" ref="carbonGaugeRef"></div>
          </div> -->
          <div class="content" style="display: block">
            <div class="head">
              <span class="col">企业名称</span>
              <span class="col">区</span>
              <span class="col">街道</span>
              <span class="col">设备状态</span>
            </div>
            <div class="device-table-content">
              <el-table
                ref="companiesRef"
                class="alarmTwo-table"
                :data="devicesData"
                style="width: 100%; height: 35rem"
                :cell-style="tableColor"
                @cell-click="toggleAccess"
                @cell-mouse-enter="mouseEnterTwo"
                @cell-mouse-leave="mouseLeaveTwo"
                :row-style="pointer"
              >
                <el-table-column prop="cname"></el-table-column>
                <el-table-column prop="area"></el-table-column>
                <el-table-column prop="street"></el-table-column>
                <!-- <el-table-column prop="addr"></el-table-column> -->
                <el-table-column prop="state">
                  <template #default="scope">{{
                    scope.row.state === 0
                      ? "离线"
                      : scope.row.state === 1
                      ? "在线"
                      : scope.row.state === 2
                      ? "未激活"
                      : "已退回"
                  }}</template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <!-- 设备类型 -->
      <!-- <div class="top panel">
        <div class="inner">
          <div class="all">
            <h3>设备类型</h3>
            <ul>
              <li>正常设备</li>
              <li style="color: #fac858">告警设备</li>
              <li style="color: #ee6666">停机设备</li>
            </ul>
          </div>
          <div class="content" ref="businessChartRef"></div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useBigBoardA } from "@/store/backend/BigBoard/bigBoard1";
import { changzhou, res } from "../../../../virtual"; //最新常州市地图json
import { useConfig } from "@/store/config";
import { BEFORE_RESIZE_LAYOUT } from "@/store/constant/cacheKey"; //获取上一次切换的布局
import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
import { ElNotification } from "element-plus"; //处理导航信息
import {
  ref,
  onBeforeUnmount,
  reactive,
  nextTick,
  onMounted,
  onDeactivated,
  onUnmounted,
} from "vue";
import "element-plus/theme-chalk/display.css";
import { useUserInfo } from "@/store/userInfo";
import { useNavTabs } from "@/store/navTabs";
import { Session } from "@/utils/storage";
import { useRegion } from "@/store/backend/SysM/region";
import { useAccess } from "@/store/backend/DeviceM/access";
import { useBusiness } from "@/store/backend/BusinessM/info";
import {
  timeFormat,
  VOCS,
  origin,
  debounce,
  throttle,
  getStart,
  getEnd,
} from "@/utils/common";
import useCurrentInstance from "@/utils/useCurrentInstance";
import _ from "lodash";
import { useAdminInfo } from "@/store/adminInfo";
// 引入echarts 按需引入
import * as echarts from "echarts/core";
import {
  DatasetComponent,
  DatasetComponentOption,
  TitleComponent,
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  ToolboxComponent,
  ToolboxComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption,
  TransformComponent,
  VisualMapComponent,
  VisualMapComponentOption,
  GeoComponent,
  GeoComponentOption,
} from "echarts/components";
import {
  MapChart,
  MapSeriesOption,
  BarChart,
  BarSeriesOption,
  LineChart,
  LineSeriesOption,
  PieChart,
  PieSeriesOption,
  GaugeChart,
  GaugeSeriesOption,
} from "echarts/charts";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import screenfull from "screenfull";
import { proxyRefs } from "vue";
import { Timer } from "@element-plus/icons-vue";
echarts.use([
  DatasetComponent,
  LineChart,
  LegendComponent,
  BarChart,
  LabelLayout,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  TransformComponent,
  CanvasRenderer,
  UniversalTransition,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  ToolboxComponent,
  PieChart,
  GaugeChart,
]);
type EChartsOption = echarts.ComposeOption<
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | BarSeriesOption
  | TitleComponentOption
  | LineSeriesOption
  | DatasetComponentOption
  | VisualMapComponentOption
  | GeoComponentOption
  | MapSeriesOption
  | ToolboxComponentOption
  | PieSeriesOption
  | GaugeSeriesOption
>;

const navTabs = useNavTabs();
const config = useConfig();
const router = useRouter();
const region = useRegion();
const access = useAccess();
const bigBoardA = useBigBoardA();
const business = useBusiness();
const adminInfo = useAdminInfo();
const { proxy } = useCurrentInstance();
let tableNode = ref();
let tableNodeTwo = ref();
let scrollHeight = ref<number>(0);
let currentScrollTop = ref<number>(0);
let maxScrollTop = ref<number>(0);
// let timeInter: any = ref(null); //每次滑动的定时器
// let timeInter2: any = ref(null);
// let timeInter3: any = ref(null);
let timeInter: any = 0; //每次滑动的定时器
let timeInter2: any = 0;
let timeInter3: any = 0;
let timeInterOneConfig = ref(false); //自动循环1标志
let timeInterTwoConfig = ref(false); //自动循环2标志

let monthAdd = ref(""); //本月设备新增数量
const cascader: {
  companyOptions: anyObj[];
  regionOptions: anyObj[];
  months: anyObj[];
} = reactive({
  companyOptions: [], //企业列表
  regionOptions: [
    {
      areaId: "4",
      areaName: "天宁区",
    },
    {
      areaId: "6",
      areaName: "钟楼区",
    },
    {
      areaId: "7",
      areaName: "新北区",
    },
    {
      areaId: "8",
      areaName: "武进区",
    },
    {
      areaId: "24",
      areaName: "金坛区",
    },
    {
      areaId: "25",
      areaName: "溧阳市",
    },
  ], //区域列表
  months: [
    {
      value: "01",
      label: "1月",
    },
    {
      value: "02",
      label: "2月",
    },
    {
      value: "03",
      label: "3月",
    },
    {
      value: "04",
      label: "4月",
    },
    {
      value: "05",
      label: "5月",
    },
    {
      value: "06",
      label: "6月",
    },
    {
      value: "07",
      label: "7月",
    },
    {
      value: "08",
      label: "8月",
    },
    {
      value: "09",
      label: "9月",
    },
    {
      value: "10",
      label: "10月",
    },
    {
      value: "11",
      label: "11月",
    },
    {
      value: "12",
      label: "12月",
    },
  ],
});
const nowTime: { complete: string; year: string; month: string } = reactive({
  complete: "",
  year: "",
  month: "",
});

const stableMonth = ref();
const regionId = ref();
const cascaderProps = {
  label: "name",
  value: "name",
  children: "children",
};
const cascaderOneProps = {
  label: "areaName",
  value: "areaId",
  children: "children",
};
const togglePage = ref(false);
const businesslength = ref();
//当前页面默认选项
const state3 = reactive({
  isFullScreen: false, //是否全屏
  fullscreen: 0,
});
//存放当月活性炭更换量图表
const state4: { charts: any[] } = { charts: [] };
const carbonSwitch = ref("VOCs");
const tableHead = [
  {
    prop: "cname",
    label: "所属企业",
  },
  // {
  //   prop: "code",
  //   label: "设备编号",
  // },
  {
    prop: "addr",
    label: "设备地址",
  },
  {
    prop: "report_name",
    label: "告警信息",
  },
  {
    prop: "report_time",
    label: "告警时间",
  },
];
const mapChartInit: { charts: any[] } = { charts: [] };
const state: { charts: any[] } = { charts: [] }; //存放echarts图表数据
const state2: { charts: any[] } = { charts: [] }; //存放echarts图表数据

type Table = {
  warnDevice: string;
  warnInfo: string;
  warnLocation: string;
  createTime: string;
};
type Carbon = {
  equipid: number;
  name: string;
  avatar: string;
  owner_auth: number;
  user_auth: number;
  remark: string;
  is_online: number;
  is_alarm: number;
  is_running: number;
  status: string;
  last_parser_time: number;
  wind_speed: string;
  temperature: string;
  pa: string;
  carbonUseTime: string;
  carbonUse: string;
  dev_name: string;
  current_value_sensorid: number;
  current_value_updatetime: number;
  lastChange: string;
  changeTimes: string;
  representative: string;
  telephone: string;
  tags: [];
};
type DeviceOverview = {
  from: Item[];
};
type Item = {
  count: number;
  normal: number;
  warn: number;
  stop: number;
};

const warnTableRef = ref();
const companiesRef = ref();
const tableData = ref<any>([]);
const tableDataClone = ref<any>([]);
const devicesData = ref<any>([]);
const devicesDataClone = ref<any>([]);
const cascaderRef = ref();
const cascaderRefTwo = ref();
const carBonTableData = reactive<Carbon[]>([]);
const pointData = reactive<any>([]);
const mapData = reactive<any>([]); //map地图不随区域改变而改变
const mapRef = ref<HTMLElement>();
const ponintChartRef = ref<HTMLElement>();
const userChartRef = ref<HTMLElement>();
const User = reactive<any>([]);
const carbonGaugeRef = ref<HTMLElement>();
const businessChartRef = ref<HTMLElement>();
const deviceList = reactive<DeviceOverview>({
  from: [{ count: 2190, normal: 2000, warn: 180, stop: 10 }],
});
const Devices = reactive<any>([]);
//无数据占位
const optionNull = reactive<any>({
  title: {
    text: "暂无数据",
    x: "center",
    y: "center",
    textStyle: {
      color: "#fff",
      fontWeight: "normal",
      fontSize: 16,
    },
  },
});

let stop = ref<boolean>(false);

//地图
const initMapChart = (changzhou: any) => {
  echarts.registerMap("changzhou", changzhou);
  const mapChart = echarts.init(mapRef.value as HTMLElement);
  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{b}",
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        dataView: { readOnly: false },
        myTool1: {
          show: true,
          title: "还原",
          icon: "path://M512 981.333333c-209.866667 0-396.693333-126.026667-466.293333-314.08a35.52 35.52 0 0 1 23.626666-44.426666 38.613333 38.613333 0 0 1 48 20.693333c58.666667 158.933333 217.013333 265.493333 394.666667 265.6s336-106.666667 394.666667-266.133333a37.6 37.6 0 0 1 28.853333-23.626667 38.986667 38.986667 0 0 1 35.786667 11.946667 34.773333 34.773333 0 0 1 7.146666 35.36c-69.386667 188.373333-256.48 314.666667-466.453333 314.666666z m431.36-574.08a37.92 37.92 0 0 1-35.946667-24.266666C849.386667 222.56 690.613333 114.88 512 114.72S174.72 222.346667 116.746667 382.773333A38.72 38.72 0 0 1 69.333333 403.733333a35.786667 35.786667 0 0 1-24.106666-44.373333C113.333333 169.866667 301.013333 42.666667 512 42.666667s398.666667 127.306667 467.146667 316.96a34.56 34.56 0 0 1-4.906667 32.64 38.933333 38.933333 0 0 1-30.88 14.986666z",
          onclick: () => {
            const chart = echarts.init(mapRef.value as HTMLElement);
            // 还原
            chart.clear();
            chart.setOption(option);
            func(2, false);
            access
              .getAccessList({
                regions: region.regionIds + "",
                pageSize: 10000,
              })
              .then((res: any) => {
                devicesData.value = res.rows;
              });
          },
        },
        saveAsImage: {},
      },
    },
    visualMap: {
      min: 0,
      max: 15,
      show: false,
      text: ["高", "低"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["#b1d7fb"],
      },
      textStyle: {
        color: "#fff",
      },
      left: 40,
      bottom: 40,
    },
    geo: [
      // 叠地图
      {
        map: "changzhou",
        top: "9%",
        left: "20%",
        aspectScale: 0.9,
        zlevel: 4,
        itemStyle: {
          color: "#2760c3", // 背景
          borderColor: "#2760c3", // 边框颜色
          shadowColor: "#2760c3",
          borderWidth: 1, // 边框宽度
        },
        emphasis: {
          disabled: true,
        },
      },
    ],
    series: [
      {
        type: "map",
        zlevel: 6,
        aspectScale: 0.9,
        top: "7%",
        selectedMode: true,
        map: "changzhou",
        label: {
          show: true,
          color: "#fff",
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: "#37ebfd",
          shadowColor: "#64b2df",
          shadowBlur: 8,
          areaColor: {
            x: 0.5,
            y: 0.5,
            r: 0.8,
          },
        },
        emphasis: {
          disabled: false,
          itemStyle: {
            areaColor: "green",
          },
          label: {
            show: true,
            color: "#fff",
          },
        },
        select: {
          label: { color: "#fff" },
          itemStyle: {
            // 选中区域的默认样式
            areaColor: "green",
          },
        },
        data: mapData,
      },
    ],
  };
  // //搜索区域管理不同参数
  // const getRegionsInfo = (params: string, value: any) => {
  //   region.getInfo(params, value);
  // };
  mapChart.on("click", (params: any) => {
    console.log("搜索区域管理不同参数id", params.data, adminInfo.userName);
    if (adminInfo.userName === "admin") {
      func(params.data.id, true);
      getParentRegionIds(params.data.id);
      return;
    }
    if (region.usrRegionIds.includes(params.data.id)) {
      func(params.data.id, true);
      getParentRegionIds(params.data.id);
    } else {
      ElNotification({
        type: "warning",
        message: "没有所在区域权限",
      });
    }

    //判断是否可以点击该区域
    // region.getInfo("areaName", params.data.name).then((res: any) => {
    //   console.log("搜索区域管理不同参数", res);
    // });
    // switch (params.data.name) {
    //   case "钟楼区":
    //     //region: 6,
    //     func(6, true);
    //     getParentRegionIds(6);
    //     break;
    //   case "天宁区":
    //     //   region: 4,
    //     func(4, true);
    //     getParentRegionIds(4);
    //     break;
    //   case "武进区":
    //     //   region: 8,
    //     func(8, true);
    //     getParentRegionIds(8);
    //     break;
    //   case "溧阳市":
    //     //   region: 25,
    //     func(25, true);
    //     getParentRegionIds(25);
    //     break;
    //   case "金坛区":
    //     //   region: 24,
    //     func(24, true);
    //     getParentRegionIds(24);
    //     break;
    //   default:
    //     // region: 7,
    //     func(7, true);
    //     getParentRegionIds(7);
    //     break;
    // }
    // alert(params.data.name + ':' + params.data.value);
    // getTableData(params.data); //!修改异常设备监控数据
    //!修改概览数据
  });
  mapChart.setOption(option);
  mapChartInit.charts.push(mapChart);
};
//通过点击地图获取父级区域Ids再获取子级Ids
const getParentRegionIds = (id: number) => {
  region.getChildren(id).then((result: any) => {
    access
      .getAccessList({ regions: result + "", pageSize: 10000 })
      .then((res: any) => {
        devicesData.value = res.rows;
      });
  });
};
//设备分布饼图
const initPie = () => {
  const pointPieChart = echarts.init(ponintChartRef.value as HTMLElement);
  const option = {
    tooltip: {
      // 非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: "item",
      // 格式化提示内容：
      // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        name: "地区",
        type: "pie",
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        itemStyle: {
          borderRadius: 8,
        },
        nameProperty: "area_name",
        data: pointData,
        label: {
          fontSize: 10,
        },
        //引导线
        labelLine: {
          length: 8,
          length2: 10,
        },
      },
    ],
  };
  pointPieChart.setOption(pointData.length === 0 ? optionNull : option);
  state.charts.push(pointPieChart);
};
//常州用户总量统计 改为 活性炭月量
const initBar = () => {
  const userChart = echarts.init(userChartRef.value as HTMLElement);
  const option = {
    // 工具提示
    tooltip: {
      // 触发类型  经过轴触发axis  经过轴触发item
      trigger: "item",
      // 轴触发提示才有效
      axisPointer: {
        // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
        type: "shadow",
      },
    },
    // 图表边界控制
    grid: {
      // 距离 上右下左 的距离
      left: "0",
      right: "3%",
      bottom: "3%",
      top: "5%",
      // 大小是否包含文本【类似于boxsizing】
      containLabel: true,
      //显示边框
      show: true,
      //边框颜色
      borderColor: "rgba(0, 240, 255, 0.3)",
    },
    // 控制x轴
    xAxis: [
      {
        // 使用类目，必须有data属性
        type: "category",
        // 使用 data 中的数据设为刻度文字
        data: User[0],
        // 刻度设置
        axisTick: {
          // true意思：图形在刻度中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          show: false,
        },
        //文字
        axisLabel: {
          color: "#4c9bfd",
        },
      },
    ],
    // 控制y轴
    yAxis: [
      {
        // 使用数据的值设为刻度文字
        type: "value",
        axisTick: {
          // true意思：图形在刻度中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          show: false,
        },
        //文字
        axisLabel: {
          color: "#4c9bfd",
        },
        splitLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)",
          },
        },
      },
    ],
    // 控制x轴
    series: [
      {
        // series配置
        // 颜色
        itemStyle: {
          // 提供的工具函数生成渐变颜色
          color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "#00fffb" }, // 0 起始颜色
              { offset: 1, color: "#0061ce" }, // 1 结束颜色
            ]
          ),
        },
        // 图表数据名称
        name: "活性炭更换量统计",
        // 图表类型
        type: "bar",
        // 柱子宽度
        barWidth: "30%",
        // 数据
        data: User[1],
      },
    ],
  };
  userChart.setOption(User[1].length === 0 ? optionNull : option);
  // state.charts.push(userChart);
  state4.charts.push(userChart);
};
//设备类型
const initBusinessGague = () => {
  const businessChart = echarts.init(businessChartRef.value as HTMLElement);
  const gaugeData = [
    {
      value: Devices[1]?.value ? Devices[1].value : 0,
      title: {
        offsetCenter: ["0%", "-30%"],
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ["0%", "-20%"],
      },
    },
    {
      value: Devices[0]?.value ? Devices[0].value : 0,
      title: {
        offsetCenter: ["0%", "0%"],
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ["0%", "10%"],
      },
    },
    {
      value: Devices[2]?.value ? Devices[2].value : 0,
      title: {
        offsetCenter: ["0%", "30%"],
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ["0%", "40%"],
      },
    },
  ];
  const option = {
    color: ["#5470c6", "#fac858", "#ee6666"],
    series: [
      {
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false,
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            borderWidth: 1,
            borderColor: "#464646",
          },
        },
        axisLine: {
          lineStyle: {
            width: 40,
          },
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          distance: 50,
        },
        data: gaugeData,
        title: {
          fontSize: 14,
        },
        detail: {
          width: 50,
          height: 14,
          fontSize: 14,
          color: "inherit",
          borderColor: "inherit",
          borderRadius: 20,
          borderWidth: 1,
          formatter: "{value}",
        },
      },
    ],
  };
  option && businessChart.setOption(option);
  state.charts.push(businessChart);
};

interface anyObj {
  [key: string]: any;
}
const carbonItem: { config: anyObj } = reactive({ config: {} });
//活性炭使用情况
const carbonSatrt = () => {
  carbonRestTimeInter()
    .then(() => {
      //判断state2.charts是否含有数据
      if (state2.charts.length > 0) {
        state2.charts[0].dispose();
        state2.charts.shift();
      }
      return carbonSatrt();
    })
    .catch(() => {
      return;
    });
};
//活性炭数组数据循环展示
const carbonRestTimeInter = () => {
  return new Promise<void>((resolve, reject) => {
    let temp = carBonTableData;
    // let temp = toRaw(carBonTableData[0]);
    let len = (temp as any).length;
    if (len === 0) {
      if (state2.charts.length > 0) {
        state2.charts[0].dispose();
        state2.charts.shift();
      }
    } else {
      const carbonGaugeChart = echarts.init(
        carbonGaugeRef.value as HTMLElement
      );
      for (let i = 0; i < len; i++) {
        (function (n) {
          setTimeout(() => {
            let option = {
              series: [
                {
                  type: "gauge",
                  min: 0,
                  max: 500,
                  progress: {
                    show: true,
                    width: 18,
                  },
                  axisLine: {
                    lineStyle: {
                      width: 18,
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                  splitLine: {
                    length: 15,
                    lineStyle: {
                      width: 2,
                      color: "#999",
                    },
                  },
                  axisLabel: {
                    distance: 25,
                    color: "#999",
                    fontSize: 15,
                  },
                  anchor: {
                    show: true,
                    showAbove: true,
                    size: 18,
                    itemStyle: {
                      borderWidth: 10,
                    },
                  },
                  title: {
                    show: false,
                  },
                  detail: {
                    valueAnimation: true,
                    fontSize: 25,
                    offsetCenter: [0, "70%"],
                    color: "#00fffb",
                  },
                  itemStyle: {
                    // 提供的工具函数生成渐变颜色
                    color: new echarts.graphic.LinearGradient(
                      // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                      0,
                      0,
                      0,
                      1,
                      [
                        { offset: 0, color: "red" }, // 0 起始颜色
                        { offset: 1, color: "#00fffb" }, // 1 结束颜色
                      ]
                    ),
                  },
                  data: [
                    {
                      value: 0,
                    },
                  ],
                },
              ],
            };
            option.series[0].data[0].value = (temp as any)[n]?.timeNum
              ? (temp as any)[n]?.timeNum
              : 0;
            carbonGaugeChart.setOption(option);
            carbonItem.config = (temp as any)[n];
            if (len - n === 1 && !stop.value) {
              state2.charts.push(carbonGaugeChart);
              resolve();
            } else {
              reject();
            }
          }, 4000 * n);
        })(i);
      }
    }
  });
};
const mouseEnter = () => {
  window.clearInterval(timeInter);
  timeInter = 0;
  console.log("mouseLeave解除自动循环1", timeInter);
};
const mouseEnterTwo = () => {
  window.clearInterval(timeInter2);
  timeInter2 = 0;
  console.log("mouseLeave解除自动循环2", timeInter2);
};
const mouseLeave = () => {
  // timeInterOneConfig.value ? "" : throttle(autoCycle(), 1000);
  if (!timeInterOneConfig.value) {
    autoCycle();
  }
};
const mouseLeaveTwo = () => {
  // timeInterOneConfig.value ? "" : throttle(autoCycleTwo(), 1000);
  if (!timeInterOneConfig.value) {
    autoCycleTwo();
  }
};
const autoCycle = () => {
  console.log("自动循环1");
  timeInter = window.setInterval(() => {
    tableNode.value = document
      .querySelector(".alarm-table")
      ?.querySelector(".el-scrollbar__wrap") as HTMLElement;
    // 元素自增距离顶部1像素
    tableNode.value ? (tableNode.value.scrollTop += 1) : "";
    // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
    if (timeInter && tableNode.value) {
      if (
        tableNode.value?.scrollHeight -
          tableNode.value?.clientHeight -
          tableNode.value?.scrollTop <
        5
      ) {
        // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
        tableNode.value.scrollTop =
          tableNode.value?.scrollTop - tableNode.value?.scrollHeight / 2;
      }
    } else {
      window.clearInterval(timeInter);
      timeInter = 0;
    }
  }, 50);
};
const autoCycleTwo = () => {
  console.log("自动循环2");
  timeInter2 = window.setInterval(() => {
    tableNodeTwo.value = document
      .querySelector(".alarmTwo-table")
      ?.querySelector(".el-scrollbar__wrap") as HTMLElement;
    // 元素自增距离顶部1像素
    tableNodeTwo.value ? (tableNodeTwo.value.scrollTop += 1) : "";
    // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
    if (timeInter2 && tableNodeTwo.value) {
      if (
        tableNodeTwo.value?.scrollHeight -
          tableNodeTwo.value?.clientHeight -
          tableNodeTwo.value?.scrollTop <
        5
      ) {
        // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
        tableNodeTwo.value.scrollTop =
          tableNodeTwo.value?.scrollTop -
          tableNodeTwo.value?.scrollHeight / 2 +
          5;
      }
    } else {
      window.clearInterval(timeInter2);
      timeInter2 = 0;
    }
  }, 50);
};
//跳转到企业模块
const toggleBusiness = () => {
  togglePage.value = true;
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  window.clearInterval(timeInter);
  timeInter = 0;
  window.clearInterval(timeInter2);
  timeInter2 = 0;
  if (!timeInter && !timeInter2) {
    router.push({ path: "/admin/system/company" });
  }
};
//总览数字链接到设备接入后台
const toggleDevices = (state: any) => {
  togglePage.value = true;
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  window.clearInterval(timeInter);
  timeInter = 0;
  window.clearInterval(timeInter2);
  timeInter2 = 0;
  switch (state) {
    case "":
      if (!timeInter && !timeInter2) {
        router.push({ path: "/admin/system/equipment" });
      }
      break;
    case 2:
      if (!timeInter && !timeInter2) {
        router.push({
          path: "/admin/system/equipment",
          query: { estate: 2 }, //告警=》故障
        });
      }
      break;
    case 1:
      if (!timeInter && !timeInter2) {
        //正常=》在线
        router.push({ path: "/admin/system/equipment", query: { estate: 1 } });
      }
      break;
    case 0:
      if (!timeInter && !timeInter2) {
        //停机
        router.push({ path: "/admin/system/equipment", query: { estate: 0 } });
      }
      break;
  }
};
//切换活性炭更换量与Vocs
const switchCarbon = () => {
  carbonSwitch.value === "VOCs" ? vocs() : originCarbon();
  carbonSwitch.value = carbonSwitch.value === "VOCs" ? "更换量" : "VOCs";
  console.log("切换活性炭更换量与Vocs", carbonSwitch.value);
};
const vocs = () => {
  console.log("User", User[1]);
  VOCS(User[1]).then((res: any) => {
    User[1] = res;
    initBar();
  });
};
const originCarbon = () => {
  origin(User[1]).then((res: any) => {
    User[1] = res;
    initBar();
  });
};

//清除定时器
const clearAllInterval = () => {
  window.clearInterval(timeInter);
  window.clearInterval(timeInter2);
  window.clearTimeout(timeInter3);
  timeInter = 0;
  timeInter2 = 0;
  timeInter3 = 0;
};

//监听窗口大下自适应的方法
const echartsResize = () => {
  if (state2.charts.length > 0) {
    state2.charts[0].resize();
  }
  if (mapChartInit.charts.length > 0) {
    mapChartInit.charts[0].resize();
  }
  nextTick(() => {
    for (const key in state.charts) {
      state.charts[key].resize();
    }
  });
};
//释放state中图表并删除
const dShift = () => {
  return new Promise((resolve, reject) => {
    for (const key in state.charts) {
      state.charts[key].dispose();
    }
    resolve("");
  });
};
//选择月份的时候释放当月活性炭图表
const onlyDShift = () => {
  return new Promise((resolve, reject) => {
    for (const key in state4.charts) {
      state4.charts[key].dispose();
    }
    resolve("");
  });
};
//区域选择
// const handleChange = (value: any) => {
//   if (!value) {
//     // let data = [...new Set(value.flat(Infinity))];
//     func(2, false);
//     access
//       .getAccessList({ regions: region.regionIds + "" })
//       .then((res: any) => {
//         devicesData.value = res.rows;
//       });
//   } else {
//     console.log(
//       "region.usrRegionIds",
//       region.usrRegionIds,
//       "Number(value[0])",
//       Number(value[0])
//     );

//     if (region.usrRegionIds) {
//       if (region.usrRegionIds.includes(Number(value[0]))) {
//         func(Number(value[0]), true);
//         getParentRegionIds(Number(value[0]));
//       } else {
//         ElNotification({
//           type: "warning",
//           message: "没有所在区域权限",
//         });
//       }
//     } else {
//       func(Number(value[0]), true);
//       getParentRegionIds(Number(value[0]));
//     }
//   }
// };
//企业选择
const handleChangeTwo = (value: any) => {
  mouseEnterTwo();
  console.log("企业选择", value);
  // let data = [...new Set(value.flat(Infinity))];
  if (!value) {
    access
      .getAccessList({ regions: region.regionIds + "", pageSize: 10000 })
      .then((res: any) => {
        devicesData.value = res.rows;
        let temp = _(res.rows);
        devicesDataClone.length = 0;
        devicesDataClone.value = temp;
        setTimeout(() => {
          autoCycleTwo();
        });
      });
  } else {
    access
      .getAccessList({
        regions: region.regionIds + "",
        cname: value[0],
        pageSize: 10000,
      })
      .then((res: any) => {
        devicesData.value = res.rows;
        let temp = _(res.rows);
        devicesDataClone.length = 0;
        devicesDataClone.value = temp;
        setTimeout(() => {
          autoCycleTwo();
        });
      });
  }
};
//月份选择
const handleChangeCarbon = (value: any) => {
  carbonSwitch.value = "VOCs";
  console.log("月份选择", value, nowTime);
  onlyDShift().then(() => {
    state4.charts.length = 0;
  });
  if (!value) {
    stableMonth.value = 0;
    console.log("regionId.value还原的region", regionId.value);

    if (regionId.value && regionId.value !== 2) {
      bigBoardA
        .getMonthCarbon(regionId.value, nowTime.complete)
        .then((res: any) => {
          console.log("点击活性炭", res);
          User.length = 0; //先清空数组再赋值
          User.push(...res);
          initBar();
        });
    } else {
      bigBoardA.getMonthCarbonTwo(nowTime.complete).then((res: any) => {
        console.log("点击活性炭", res);
        User.length = 0; //先清空数组再赋值
        User.push(...res);
        initBar();
      });
    }
  } else {
    stableMonth.value = 1;
    if (regionId.value) {
      bigBoardA
        .getMonthCarbon(regionId.value, nowTime.year + "-" + value[0])
        .then((res: any) => {
          console.log("点击活性炭", res);
          User.length = 0; //先清空数组再赋值
          User.push(...res);
          initBar();
        });
    } else {
      bigBoardA
        .getMonthCarbonTwo(nowTime.year + "-" + value[0])
        .then((res: any) => {
          console.log("点击活性炭", res);
          User.length = 0; //先清空数组再赋值
          User.push(...res);
          initBar();
        });
    }
  }
};
//前往后台
proxy.eventBus.on("ToDashBoard", () => {
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  togglePage.value = true;
  window.clearInterval(timeInter);
  timeInter = 0;
  window.clearInterval(timeInter2);
  timeInter2 = 0;
  if (!timeInter && !timeInter2) {
    router.push({ path: "/admin/dashboard" });
  }
});
//点击设备地图根据区域不同查看不同区域数据
const func = (Region: number, boo: boolean) => {
  carbonSwitch.value = "VOCs";
  regionId.value = Region;
  dShift().then(() => {
    state.charts.length = 0;
  });
  onlyDShift().then(() => {
    state4.charts.length = 0;
  });
  if (state2.charts.length > 0) {
    state2.charts[0].dispose();
    state2.charts.shift();
  }
  bigBoardA.getPoints(Region).then((res: any) => {
    pointData.length = 0; //先清空数组再赋值
    pointData.push(...res);
    initPie();
  });
  switch (boo) {
    case true:
      if (stableMonth.value) {
        bigBoardA
          .getMonthCarbon(Region, nowTime.year + "-" + stableMonth.value)
          .then((res: any) => {
            console.log("点击活性炭", res);
            User.length = 0; //先清空数组再赋值
            User.push(...res);
            initBar();
          });
      } else {
        bigBoardA.getMonthCarbon(Region, nowTime.complete).then((res: any) => {
          console.log("点击活性炭", res);
          User.length = 0; //先清空数组再赋值
          User.push(...res);
          initBar();
        });
      }
      break;
    default:
      if (stableMonth.value) {
        bigBoardA
          .getMonthCarbonTwo(nowTime.year + "-" + stableMonth.value)
          .then((res: any) => {
            console.log("活性炭", res);
            User.length = 0; //先清空数组再赋值
            User.push(...res);
            initBar();
          });
      } else {
        bigBoardA.getMonthCarbonTwo(nowTime.complete).then((res: any) => {
          console.log("活性炭", res);
          User.length = 0; //先清空数组再赋值
          User.push(...res);
          initBar();
        });
      }
      break;
  }
  //过滤子级区域id获取本月新增数据
  region.getLastAreaId(region.originData, Region).then((res: any) => {
    rightMonthDevices(res + "");
  });

  bigBoardA.getEquipments(Region).then((res: any) => {
    console.log("Devices", Devices);
    Devices.length = 0;
    Devices.push(...res);
    // initBusinessGague();
  });
  bigBoardA.getAbnormal(Region).then((res) => {
    console.log("异常设备监控是否触发", Region);

    tableData.value.length = 0;
    tableData.value = res;
  });
  // bigBoardA.getCarbonData(region).then((res: any) => {
  //   carBonTableData.length = 0;
  //   carBonTableData.push(...res);
  //   carbonSatrt(); //循环展示动态数据
  // });
  console.log("Region", Region);

  if (Region === 2) {
    business.getCompanyList().then((res: any) => {
      cascader.companyOptions = res.rows;
      businesslength.value = res.total;
    });
  } else {
    region.getChildren(Region).then((result: any) => {
      console.log("企业数量", result);
      business.getCompanyListNumber(result).then((res: any) => {
        // cascader.companyOptions = res.rows;
        businesslength.value = res.total;
      });
    });
  }
};
const KeyDown = (event: any) => {
  if (event.keyCode === 122) {
    event.returnValue = false;
    screenfull.toggle();
    screenfull.onchange(() => {
      state3.isFullScreen = screenfull.isFullscreen;
      state3.fullscreen = 1;
    });
    // this.fullScreen(); //触发全屏的按钮
  }
};
//获取设备接入数据
const getDevicesData = () => {
  access
    .getAccessList({ regions: region.regionIds + "", pageSize: 10000 })
    .then((res: any) => {
      devicesData.value = res.rows;
      let temp = _(res);
      devicesDataClone.value = temp;
    });
};
//获取年月
const getTime = () => {
  //获取权限查询区域树将id遍历出来
  nowTime.complete = timeFormat("", "yyyy-mm");
  let arr: string[] = [];
  arr = nowTime.complete.split("-");
  nowTime.year = arr[0];
  nowTime.month = arr[1];
};
//企业设备状态列表状态颜色
const tableColor = ({ row, rowIndex, columnIndex }: any) => {
  if (columnIndex === 3) {
    switch (row.state) {
      case 0:
        return { color: "#c8c9cc" };
      case 1:
        return { color: "#00ff00" };
      default:
        return { color: "#e6a23c" };
    }
  }
};
//列表手套样式
const pointer = ({ row, rowIndex }: any) => {
  return "cursor: pointer";
};
getDevicesData();
getTime();
// getBusinessLength();
//点击异常设备监控单元格跳转至设备告警日志
const toggleWarn = (row: any) => {
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  togglePage.value = true;
  window.clearInterval(timeInter);
  timeInter = 0;
  window.clearInterval(timeInter2);
  timeInter2 = 0;
  if (!timeInter && !timeInter2) {
    router.push({ path: "/admin/system/warning", query: { eqid: row.eqid } });
  }
};
proxy.eventBus.on("clear", () => {
  clearTimeout(timeInter3);
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  timeInter3 = 0;
  window.clearInterval(timeInter);
  timeInter = 0;
  window.clearInterval(timeInter2);
  timeInter2 = 0;
  console.log(
    timeInter,
    timeInter2,
    timeInterOneConfig.value,
    timeInterTwoConfig.value
  );
});
const toggleAccess = (row: any) => {
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  togglePage.value = true;
  window.clearInterval(timeInter);
  timeInter = 0;
  window.clearInterval(timeInter2);
  timeInter2 = 0;
  console.log("row", row);
  //获取企业信息跳转至企业内详情 包含设备列表
  business.getItemInfo(row.cname).then((res: any) => {
    business.$patch((state) => {
      state.loading = true;
      state.query = row.institution;
      state.item = res.rows[0];
    });
    if (!timeInter && !timeInter2) {
      router.push({
        path: "/admin/BusinessM/detail",
        query: { institution: row.institution },
      });
    }
  });
};

//获取当前月的第一天和最后一天
//本月新增
const rightMonthDevices = (regions: any) => {
  let beginTime = getStart();
  let endTime = getEnd();
  bigBoardA
    .getMonthDevices({
      params: {
        beginTime,
        endTime,
      },
      regions,
      pageSize: 1000,
    })
    .then((res: any) => {
      monthAdd.value = res.rows.length;
    });
};

onMounted(() => {
  business.getCompanyList().then((res: any) => {
    cascader.companyOptions = res.rows;
    businesslength.value = res.total;
  });
  // bigBoardA.getCarbonData(2).then((res: any) => {
  //   carBonTableData.push(...res);
  //   carbonSatrt(); //循环展示动态数据
  // });
  //设备分布
  bigBoardA.getPoints(2).then((res: any) => {
    pointData.push(...res);
    initPie();
  });
  //地图的设备分布
  bigBoardA.getMapData(2).then((res: any) => {
    mapData.push(...res);
    console.log("mapData", mapData);
    initMapChart(changzhou);
  });
  // 常州设备统计
  bigBoardA.getEquipments(2).then((res: any) => {
    console.log("Devices", res);
    Devices.push(...res);
    // initBusinessGague();
  });
  //活性炭当月统计
  bigBoardA.getMonthCarbonTwo(nowTime.complete).then((res: any) => {
    console.log("活性炭", res);
    User.push(...res);
    initBar();
  });
  //异常设备监控
  bigBoardA.getAbnormal(2).then((res) => {
    tableData.value = res;
    let temp = _(res);
    tableDataClone.value = temp;
  });
  //获取本月新增设备
  rightMonthDevices(region.regionIds + "");

  timeInter3 = setTimeout(() => {
    autoCycle();
    autoCycleTwo();
  }, 1000);
  window.addEventListener("resize", debounce(echartsResize(), 1000));
  window.addEventListener("keydown", KeyDown);
  window.addEventListener("popstate", changeLayout); // 回退时执行changeLayout方法
});
onBeforeRouteLeave((to, from, next) => {
  console.log("onBeforeRouteLeave被触发", to, from, next);
  if (from.path === "/admin/Bigboard/bigboardFirst") {
    timeInterOneConfig.value = true;
    timeInterTwoConfig.value = true;
    clearTimeout(timeInter3);
    timeInter3 = 0;
    window.clearInterval(timeInter);
    timeInter = 0;
    window.clearInterval(timeInter2);
    timeInter2 = 0;
    if (!timeInter && !timeInter2) {
      next();
    }
  }
});
onBeforeUnmount(() => {
  console.log("onBeforeUnmount大屏1", timeInter, timeInter2);
  clearTimeout(timeInter3);
  timeInter3 = 0;
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  window.clearInterval(timeInter);
  timeInter = 0;
  window.clearInterval(timeInter2);
  timeInter2 = 0;
  togglePage.value ? changeLayout() : "";
  stop.value = true;
  //清空三个定时器
  clearAllInterval();
  //dispos后清空state中的charts数据
  dShift().then(() => {
    state.charts.length = 0;
  });
  if (state2.charts.length > 0) {
    state2.charts[0].dispose();
    state2.charts.shift();
  }
  if (mapChartInit.charts.length > 0) {
    mapChartInit.charts[0].dispose();
    mapChartInit.charts.shift();
  }
  window.removeEventListener("resize", debounce(echartsResize(), 1000));
  window.removeEventListener("keydown", KeyDown);
});
onUnmounted(() => {
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  console.log("onUnmounted触发大屏1", timeInter.value, timeInter2.value);
  proxy.eventBus.off("ToDashBoard");
});
// 改变布局
const changeLayout = () => {
  let defaultBeforeResizeLayout = {
    layoutMode:
      config.layout.layoutMode === "Dashboard" ? "Default" : "Classic", //后台布局
    menuCollapse: config.layout.menuCollapse, //是否水平折叠收起菜单
  };
  let beforeResizeLayout = Session.get(BEFORE_RESIZE_LAYOUT); // 切换到上次布局方式
  console.log("beforeResizeLayout", beforeResizeLayout);

  if (!beforeResizeLayout)
    Session.set(BEFORE_RESIZE_LAYOUT, defaultBeforeResizeLayout);
  let beforeResizeLayoutTemp =
    (beforeResizeLayout?.layoutMode === "Dashboard"
      ? ""
      : beforeResizeLayout) || defaultBeforeResizeLayout;
  config.setLayout("menuCollapse", beforeResizeLayoutTemp.menuCollapse);
  config.setLayoutMode(beforeResizeLayoutTemp.layoutMode);
  window.removeEventListener("popstate", changeLayout);
};

onDeactivated(() => {
  timeInterOneConfig.value = true;
  timeInterTwoConfig.value = true;
  window.clearInterval(timeInter);
  timeInter = 0;
  window.clearInterval(timeInter2);
  timeInter2 = 0;
});
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}
@mixin searchCascader {
  .el-popper__arrow {
    display: none;
  }
  .el-input__wrapper {
    background: rgba(#101129, 0) !important; /* 透明 */
    .el-input__inner {
    }
  }
  background: rgba(#101129, 10) !important; /* 透明 */
  border: 1px solid #0a43bc !important;
  box-shadow: 0px 0px 4px 4px #0c2f5b inset !important;
  color: #fff;
  .el-cascader-node:hover {
    // 设置鼠标滑过时文字颜色
    background: #586f7c;
  }
  .el-cascader-node:focus {
    background: #586f7c;
  }
  .el-cascader-node__label {
    // 设置文字样式
    padding: 0 7px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
  }
  .el-cascader__suggestion-item {
    color: #fff;
  }
  .el-cascader__suggestion-item:hover {
    background: #586f7c !important; /* 透明 */
  }
  .el-cascader__suggestion-item:focus {
    background: #586f7c !important; /* 透明 */
  }
}

.viewport {
  position: relative;
  line-height: 1.15;
  font-size: 0.5rem;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: 0 0 / cover;
  // width: 100vw;
  height: 100vh;
  /* 限定大小 */
  min-width: 1024px;
  max-width: 2078px;
  min-height: 780px;
  margin: 0 auto;
  background: url(../../../assets/boardImage/title.png) no-repeat 0 0 / contain;
  display: flex;
  padding: 3.667rem 0.833rem 0;
}

.column {
  flex: 3;
  position: relative;
}

.column:nth-child(2) {
  flex: 4;
  margin: 1.333rem 0.833rem 0;
}

.panel {
  /* 边框 */
  box-sizing: border-box;
  border: 2px solid red;
  border-image: url(../../../assets/boardImage/border.png) 51 38 21 132;
  border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
  position: relative;
  margin-bottom: 0.833rem;
}

.panel .inner {
  /* 装内容 */
  /* height: 60px; */
  position: absolute;
  top: -2.125rem;
  right: -1.583rem;
  bottom: -0.875rem;
  left: -5.5rem;
  padding: 1rem 1.5rem;
}

.panel h3 {
  font-size: 0.833rem;
  color: #fff;
}

/* 概览区域 */
.overview {
  height: 4.583rem;
}

.overview .inner {
  // padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  .item {
    cursor: pointer;
  }
}

.overview h4 {
  font-size: 1.167rem;
  padding-left: 0.2rem;
  color: #fff;
  margin-bottom: 0.333rem;
}

.overview span {
  font-size: 0.667rem;
  color: #4c9bfd;
}

/* 监控 */
.monitor {
  height: 20rem;
}

.monitor .inner {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
}

.monitor .tabs {
  padding: 0 1.5rem;
  margin-bottom: 0.75rem;
}

.monitor .tabs a {
  color: #fff;
  font-size: 0.75rem;
  padding: 0 1.125rem;
}

.monitor .content {
  flex: 1;
  display: none;
  position: relative;
}

.monitor {
  .inner {
    .device-table-content {
      position: absolute;
      top: 1.6rem;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      height: 100%;

      .el-table__inner-wrapper::before {
        height: 100%;
        //去除底部白线
        height: 0px;
      }

      .el-table {
        position: relative;
        background-color: transparent; //背景色设为透明
        // border-radius: 10px; //圆角边框

        th.el-table__cell.is-leaf {
          //设置表头底部边框消失
          border-bottom: none;
        }

        th {
          background-color: transparent; //背景色设为透明
        }

        tr {
          //每一行背景色设为透明
          line-height: 1.05;
          padding: 0.5rem 1.5rem;
          background-color: transparent;

          &:hover {
            //鼠标悬浮变色
            td {
              background-color: #586f7c !important;
            }
          }

          td {
            //每一行的每一列文字为白色，底部边框为绿色，
            // padding-top: 6px; //设置行高（通过padding控制）
            // padding-bottom: 6px;
            color: #fff;
            border-bottom: 1px solid Rgb(128, 255, 255, 0.1);
          }

          td:first-child {
            //第一列的文字颜色为绿色

            color: #b8dbd9;
          }
        }

        th.el-table__cell:first-child.cell {
          //第一个表头缩进30px
          padding-left: 30px;
        }

        .el-table__cell:first-child .cell {
          //第一列数据缩进30px
          padding-left: 30px;
        }

        .el-button--text {
          //按钮颜色为绿色
          color: #80ffff;
        }
      }
    }
  }
}

.monitor .head {
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.583rem;
  padding: 0.5rem 1.5rem;
  color: #68d8fe;
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
}

/* 点位 */
.point {
  height: 14.167rem;
}

.point .chart {
  display: flex;
  margin-top: 1rem;
  justify-content: space-between;
}

.point .pie {
  width: 13rem;
  height: 10rem;
  margin-left: -0.4rem;
}

.point .data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 7rem;
  padding: 1.5rem 1.25rem;
  box-sizing: border-box;
  background-image: url(../../../assets/boardImage/rect.png);
  background-size: cover;
}

.point h4 {
  margin-bottom: 0.5rem;
  font-size: 1.167rem;
  color: #fff;
}

.point span {
  display: block;
  color: #4c9bfd;
  font-size: 0.667rem;
}

/* 地图  */
.map {
  height: 24.1rem;
  margin-bottom: 0.833rem;
  display: flex;
  flex-direction: column;
}

.map h3 {
  line-height: 1;
  padding: 0.667rem 0;
  margin: 0;
  font-size: 0.833rem;
  color: #fff;
}

.map .icon-cube {
  color: #68d8fe;
}

.map .chart {
  flex: 1;
  // background-color: rgba(255, 255, 255, 0.05);
}

.map .geo {
  width: 100%;
  height: 100%;
}

/* 用户模块 */
.users {
  height: 14.167rem;
  display: flex;
}

.users .chart {
  display: flex;
  margin-top: 1rem;
}

.users .bar {
  width: 80%;
  height: 10rem;
}

.users .data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 7rem;
  padding: 1.5rem 1.25rem;
  box-sizing: border-box;
  background-image: url(../../../assets/boardImage/rect.png);
  background-size: cover;
}

.users h4 {
  margin-bottom: 0.5rem;
  font-size: 1.167rem;
  color: #fff;
}

.users span {
  display: block;
  color: #4c9bfd;
  font-size: 0.667rem;
}

/* 订单 */
.order {
  height: 6.167rem;
}

.order .filter {
  display: flex;
}

.order .filter a {
  display: block;
  height: 0.75rem;
  line-height: 1;
  padding: 0 0.75rem;
  color: #1950c4;
  font-size: 0.75rem;
  border-right: 0.083rem solid #00f2f1;
}

.order .filter a:first-child {
  padding-left: 0;
}

.order .filter a:last-child {
  border-right: none;
}

.order .filter a.active {
  color: #fff;
  font-size: 0.833rem;
}

.order .data {
  display: flex;
  margin-top: 0.833rem;
}

.order .item {
  width: 50%;
}

.order h4 {
  font-size: 1.167rem;
  color: #fff;
  margin-bottom: 0.417rem;
}

.order span {
  display: block;
  color: #4c9bfd;
  font-size: 0.667rem;
}

/* 销售区域 */
.sales {
  height: 40rem;
}

.sales .caption {
  display: flex;
  line-height: 1;
  align-items: center;
}

.sales h3 {
  height: 0.75rem;
  padding-right: 0.75rem;
  border-right: 0.083rem solid #00f2f1;
}
.sales .cascaderTwo {
  padding-left: 10px;
}

.sales a {
  padding: 0.167rem;
  font-size: 0.667rem;
  margin: -0.125rem 0 0 0.875rem;
  border-radius: 0.125rem;
  color: #0bace6;
}

.sales a.active {
  background-color: #4c9bfd;
  color: #fff;
}

.sales .inner {
  display: flex;
  flex-direction: column;
}

.sales .chart {
  flex: 1;
  padding-top: 0.6rem;
  position: relative;
}

.sales a {
  padding: 0.167rem;
  font-size: 0.667rem;
  margin: -0.125rem 0 0 0.875rem;
  border-radius: 0.125rem;
  color: #0bace6;
}

.sales .line {
  width: 100%;
  height: 100%;
}
.sales {
  .content {
    flex: 1;
    display: none;
    position: relative;
    margin-top: 10px;
    .head {
      background: rgba(255, 255, 255, 0.1);
      font-size: 0.583rem;
      padding: 0.5rem 1.5rem;
      color: #68d8fe;
      display: flex;
      justify-content: space-between;
      line-height: 1.05;
    }
  }
  .inner {
    .device-table-content {
      position: absolute;
      top: 1.6rem;
      bottom: 0;
      width: 100%;
      overflow: hidden;

      .el-table__inner-wrapper::before {
        //去除底部白线
        height: 0px;
      }

      .el-table {
        position: relative;
        background-color: transparent; //背景色设为透明
        // border-radius: 10px; //圆角边框

        th.el-table__cell.is-leaf {
          //设置表头底部边框消失
          border-bottom: none;
        }

        th {
          background-color: transparent; //背景色设为透明
        }

        tr {
          //每一行背景色设为透明
          line-height: 1.05;
          padding: 0.5rem 1.5rem;
          background-color: transparent;

          &:hover {
            //鼠标悬浮变色
            td {
              background-color: #586f7c !important;
            }
          }

          td {
            //每一行的每一列文字为白色，底部边框为绿色，
            // padding-top: 6px; //设置行高（通过padding控制）
            // padding-bottom: 6px;
            color: #fff;
            border-bottom: 1px solid Rgb(128, 255, 255, 0.1);
          }

          td:first-child {
            //第一列的文字颜色为绿色

            color: #b8dbd9;
          }
        }

        th.el-table__cell:first-child.cell {
          //第一个表头缩进30px
          padding-left: 20px;
        }

        .el-table__cell:first-child .cell {
          //第一列数据缩进30px
          padding-left: 20px;
        }

        .el-button--text {
          //按钮颜色为绿色
          color: #80ffff;
        }
      }
    }
  }
}
/* 企业类型 */
.top {
  height: 19.7rem;
}

.top .inner {
  display: flex;
}

.top .all {
  display: flex;
  flex-direction: column;
  width: 7rem;
  color: #4c9bfd;
  font-size: 0.6rem;
  vertical-align: middle;
}

.top .all ul {
  padding-left: 0.5rem;
  margin-top: 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.top .all li {
  overflow: hidden;
}

.top .all [class^="icon-"] {
  font-size: 1.5rem;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.top .content {
  width: 100%;
  height: 100%;
}

.clock {
  position: absolute;
  top: -1.5rem;
  right: 1.667rem;
  font-size: 0.833rem;
  color: #0bace6;
}

.clock i {
  margin-right: 5px;
  font-size: 0.833rem;
}

@media screen and (max-width: 1600px) {
  .top span {
    transform: scale(0.9);
  }

  .top .province ul.sup li {
    padding: 0.4rem 0.5rem;
  }

  .top .province ul.sub li {
    padding: 0.23rem 0.5rem;
  }

  .quarter span {
    transform: scale(0.9);
  }
}

.pc-sel-table-cascader {
  @include searchCascader;
}
.pc-sel-area-cascader {
  @include searchCascader;
}

// .el-input__wrapper {
//   background: rgba(#101129, 0) !important; /* 透明 */
//   .el-input__inner {
//   }
// }
.el-cascader--small {
  .el-input--small {
    color: #fff;
    .el-input__wrapper {
      border: 2px solid #0a43bc !important;
    }
  }
  .el-input__wrapper {
    background: rgba(#101129, 0) !important; /* 透明 */
    .el-input__inner {
    }
  }
}
.pc-sel-carbon-cascader {
  width: 6%;
  height: 10%;
  overflow: hidden;
  .el-cascader-panel {
    height: 100%;
  }
  .el-cascader-menu {
    height: 100%;
    .el-cascader-menu__wrap {
      height: 100%;
    }
  }
  @include searchCascader;
}
.alarmTwo-table {
  .success {
    color: #00ff00;
  }
  .info {
    color: #c8c9cc;
  }
  .warn {
    color: #e6a23c;
  }
}
</style>
